html, body, #app {
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
		font-size: 14px;
		font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

/* margin */
.mar{margin: 20px;}
.mart{margin-top: 20px;}		.martS>*{margin-top: 20px;}
.marr{margin-right: 20px;} 	.marrS>*{margin-right: 20px;}
.marb{margin-bottom: 20px;} .marbS>*{margin-bottom: 20px;}
.marl{margin-left: 20px;} 	.marlS>*{margin-left: 20px;}

/* padding */
.pad{padding:20px;}
.padt{padding-top: 20px;} 		.padtS>*{padding-top: 20px;}
.padr{padding-right: 20px;} 	.padrS>*{padding-right: 20px;}
.padb{padding-bottom: 20px;} 	.padbS>*{padding-bottom: 20px;}
.padl{padding-left: 20px;} 		.padlS>*{padding-left: 20px;}

/* 常用指令 100%后overflow: hidden;无效 */
.main{width: 100%;height: 100%;}
.box{border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}

/* flex  */
.flex{display: flex;}
.fbetween{display: flex;justify-content: space-between;}
.fcolumn{display: flex;flex-direction: column;}
.fcenter{display: flex;justify-content: center;align-items: center;}
.frow-center{display: flex;align-items: center;}
.fcol-center{display: flex;align-items: center;}